<template>
  <!-- 主容器，高度根据窗口高度动态调整 -->
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!-- 顶部个人信息栏 -->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <!-- 头像显示，如果没有头像则显示默认图标 -->
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" src="https://luneng.wanhedashuju.com:8013/prod-api/profile/upload/2024/12/13/logo图片_20241213103240A011.png" class="cu-avatar xl round" mode="widthFix">
          </image>
          <!-- 用户未登录时显示登录提示 -->
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <!-- 用户已登录时显示用户名 -->
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <!-- 任务模块，需要权限验证 -->
      <view class="min-box" v-if="checkPermi(['develop:WeiwanchengTask:list'])">
        <view class="taskBox">
          <view class="titme-box">
            我的任务
          </view>
          <!-- 已完成任务数量 -->
          <view class="ycbox" @click="handleJiaoLiuQun(1)">
            <view class="nabox">
              已完成
            </view>
            <view class="numbox">
              {{ywcNum}}
            </view>
          </view>
          <!-- 未完成任务数量 -->
          <view class="ycbox" @click="handleJiaoLiuQun(2)">
            <view class="nabox">
              未完成
            </view>
            <view class="numbox">
              {{wwcNum}}
            </view>
          </view>
        </view>
        <!-- 报工记录模块 -->
        <view class="workBox" @click="reportRecordBnt()">
          <view class="titme-box">
            报工记录
          </view>
          <view class="workminBox">
            <!-- 报工名称 -->
            <view class="workname" v-if="jvForm.name">
              {{jvForm.name}}
            </view>
            <!-- 报工时间 -->
            <view class="workdoTime" v-if="jvForm.name">
              {{jvForm.doTime}}
            </view>
          </view>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-list">
        <!-- 编辑资料 -->
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>编辑资料</view>
          </view>
        </view>
        <!-- 应用设置 -->
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <view class="iconfont icon-setting menu-icon"></view>
            <view>应用设置</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import {
    goodsSaledoGongxuUserList,
    goodslistAndParent
  } from "@/api/system/index"
  export default {
    data() {
      return {
        // 用户名
        name: this.$store.state.user.name,
        // 应用版本号
        version: getApp().globalData.config.appInfo.version,
        // 已完成任务数量
        ywcNum: '',
        // 未完成任务数量
        wwcNum: '',
        // 报工记录表单
        jvForm: {}
      }
    },
    computed: {
      // 用户头像
      avatar() {
        return this.$store.state.user.avatar
      },
      // 窗口高度
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    onShow() {
      // 获取已完成任务数量
      this.getBaoGong()
      // 获取未完成任务数量
      this.getUnfinishedTasks()
      // 获取报工记录
      this.goodslistAndParent()
    },
    methods: {
      // 获取已完成任务数量
      getBaoGong() {
        goodsSaledoGongxuUserList({
          userName: this.name,
          status: 2
        }).then(res => {
          this.ywcNum = res.total
        })
      },
      // 获取未完成任务数量
      getUnfinishedTasks() {
        goodsSaledoGongxuUserList({
          userName: this.name,
          status: 0
        }).then(res => {
          this.wwcNum = res.total
        })
      },
      // 获取报工记录
      goodslistAndParent() {
        goodslistAndParent({
          userName: this.name,
          taskStatus: this.taskStatus // 假设 taskStatus 是一个定义好的变量
        }).then(res => {
          console.log(res, '这是什么')
          this.jvForm = res.rows[0]
        })
      },
      // 跳转到报工记录页面
      reportRecordBnt() {
        this.$tab.navigateTo('/pagesA/reportRecord/index')
      },
      // 跳转到个人信息页面
      handleToInfo() {
        this.$tab.navigateTo('/pagesA/mine/info/index')
      },
      // 跳转到编辑资料页面
      handleToEditInfo() {
        this.$tab.navigateTo('/pagesA/mine/info/edit')
      },
      // 跳转到应用设置页面
      handleToSetting() {
        this.$tab.navigateTo('/pagesA/mine/setting/index')
      },
      // 跳转到登录页面
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      // 跳转到头像设置页面
      handleToAvatar() {
        this.$tab.navigateTo('/pagesA/mine/avatar/index')
      },
      // 退出登录
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/work/index')
          })
        })
      },
      // 跳转到任务详情页面
      handleJiaoLiuQun(e) {
        this.$tab.navigateTo('/pagesA/mine/productiveTask/index?tableIndex=' + e)
      },
      // 提示模块正在建设中
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;

    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .min-box {
        display: flex;
        align-items: center;
        justify-content: center;

        .taskBox {
          width: 344rpx;
          padding: 20rpx;
          background-color: #FFFFFF;
          border-radius: 12rpx;

          .titme-box {
            color: #333;
            font-size: 28rpx;
            font-weight: 500;
          }

          .ycbox {
            margin-top: 16rpx;
            width: 314rpx;
            height: 79rpx;
            border-radius: 12rpx;
            background: #F5F6F8;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .nabox {
              color: #999;
              font-size: 28rpx;
              margin-left: 16rpx;
            }

            .numbox {
              color: #333;
              font-size: 28rpx;
              margin-right: 16rpx;
            }
          }
        }

        .workBox {
          width: 344rpx;
          margin-left: 16rpx;
          padding: 20rpx;
          background-color: #FFFFFF;
          border-radius: 12rpx;

          .titme-box {
            color: #333;
            font-size: 28rpx;
            font-weight: 500;
          }

          .workminBox {
            margin-top: 16rpx;
            width: 300rpx;
            height: 174rpx;
            border-radius: 12rpx;
            background: #F5F6F8;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .workname {
              padding: 10rpx;
            }

            .workdoTime {
              margin-top: 20rpx;
              padding: 10rpx;
            }
          }
        }
      }

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;
        display: flex;

        .action-item {
          flex: 1;

          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>